<template>

  <el-container>
    <el-menu :default-active="$route.path" :collapse="isCollapse" router background-color="#304156" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo">
      <el-menu-item>
        <img src="@/assets/img/logo.png" style="height: 26px;">
        <span slot="title" class="text">小U商城后台管理</span>
      </el-menu-item>

      <el-menu-item :index="$router.options.routes[1].children[0].path">
        <i :class="$router.options.routes[1].children[0].meta.icon"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <div v-for="(item,i) in tabList" :key="i">
        <el-submenu :index="item.path" v-if="item.children">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{item.meta.title}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="item1.path" v-for="(item1,i) in item.children" :key="i">
              <i :class="item1.meta.icon"></i>
              <span> {{item1.meta.title}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item :index="item.path" v-else>
          <i :class="$router.options.routes[1].children[0].meta.icon"></i>
          <span slot="title">{{item.meta.title}}</span>
        </el-menu-item>
      </div>
      <!-- <el-submenu :index="item.path" v-for="(item,i) in tabList" :key="i">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{item.meta.title}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="item1.path" v-for="(item1,i) in item.children" :key="i">
              <i :class="item1.meta.icon"></i>
              <span> {{item1.meta.title}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->
    </el-menu>

    <el-container>
      <el-header>
        <div class="headerDiv">
          <div class="sty">
            <i class="el-icon-s-fold" id="icon" @click="iconClick" v-show="isCollapse==false"></i>
            <i class="el-icon-s-unfold" id="icon" @click="iconClick" v-show="isCollapse"></i>

            <el-breadcrumb separator="/" style="margin-left: 20px;">
              <el-breadcrumb-item v-for="(items,i) in Breadcrumb" :key="i">{{items.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown class="i18">
              <span class="el-dropdown-link">
                中文<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>中文</el-dropdown-item>
                <el-dropdown-item>English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="right">
              <el-dropdown>
                <img src="@/assets/img/profile.jpg" height="40px" style="border-radius:8px;">
                <i class="el-icon-caret-bottom"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="goUser">个人中心</el-dropdown-item>
                  <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <el-divider></el-divider>
          <div>
            <ul class="ul">
              <li class="li" @click="liClick(item)" :id="item.id" v-for="(item,i) in tabs" :key="i">
                <div class="circle" v-if="item.id"></div>
                <div class="txt" :id="item.id">{{item.title}}</div>
                <div class="x" v-if="i!=0" @click.stop="del(item)">
                  <i class="el-icon-close" :style="item.id?'color:#fff':'color:#000'" style="padding: 3px;font-size: 10px; transform: translateY(-3.6px);"></i>
                </div>
              </li>
            </ul>
          </div>

        </div>
      </el-header>
      <el-main>
        <transition name="move">
          <keep-alive>
            <router-view />
          </keep-alive>
        </transition>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import { removeToken } from '@/utils/auth';

export default {

  watch: {
    '$route': {
      handler(route) {
        // console.log(route);
        let obj = { path: route.path, title: route.meta.title, name: route.name };
        // 判断数组中是否已存在相同的数据
        const isDuplicate = this.tabs.some(tab => tab.path === obj.path && tab.title === obj.title);
        if (!isDuplicate) {
          this.tabs.push(obj);
          sessionStorage.setItem('tabs', JSON.stringify(this.tabs));
        }
        // 添加高亮类名
        for (let i = 0; i < this.tabs.length; i++) {
          const ele = this.tabs[i];
          route.path == ele.path ? ele.id = 'active' : ele.id = '';
        }
        // 面包屑
        this.Breadcrumb = route.matched.filter(node => node.name != undefined);
      },
      deep: true,
      immediate: true
    },
  },

  data() {
    return {
      isCollapse: false,
      Breadcrumb: [],
      tabs: JSON.parse(sessionStorage.getItem('tabs')) || [{ path: '/index', title: '首页', name: 'index' }],//标签数组
      tabList: this.$router.options.routes[1].children.filter(node => node.meta.isRouter == true)//路由表 是否导航路由
    };
  },
  methods: {
    goUser() {
      this.$router.push('/user');
    },
    quit() {
      removeToken();
      localStorage.clear();
      sessionStorage.clear();
      this.$router.push('/login');
    },
    iconClick() {
      this.isCollapse = !this.isCollapse;
    },
    liClick(tab) {
      this.$router.push(tab);
    },
    // 删除tabs
    del(item) {

      this.tabs.forEach((tab, i) => {
        if (tab.path === item.path) {
          if (this.tabs.length - i == 1 && this.$route.path == this.tabs[this.tabs.length - 1].path) {// 高亮的是最后一个并且删的也是最后一个
            this.tabs.splice(i, 1);
            this.$router.push(this.tabs[this.tabs.length - 1].path);
          } else if (this.tabs.length - i != 1) { // 高亮的不是最后一个,删的也不是最后一个
            this.tabs.splice(i, 1);
            this.$router.push(this.tabs[i - 1].path);
          } else {
            this.tabs.splice(i, 1);
          }
          sessionStorage.setItem('tabs', JSON.stringify(this.tabs));
        }
      });
    },
  },
  created() {
    // console.log(JSON.parse(JSON.stringify(this.$router.options, 'this.$router.options ')));
  },
}
</script>

<style scoped>
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #c1c1c1;
}
::-webkit-scrollbar {
  height: 5px;
}
.right {
  position: absolute;
  right: 15px;
  cursor: pointer;
}
.move-enter {
  opacity: 0;
}
.move-enter-active {
  transition: all 1s;
}
.move-enter-to {
  opacity: 1;
}

.sty {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}
.i18 {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
}
/deep/.el-divider {
  margin: 0;
}
#icon {
  cursor: pointer;
  font-size: 24px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu {
  border: none;
}
.text {
  display: inline-block;
  font-weight: bold;
  transform: translateX(15px);
}

.el-container {
  height: 100vh;
  flex-basis: 0;
}

.el-header {
  padding: 0;
  box-shadow: 0px 1px 1px 0px #dcdfe6;
  height: 80px !important;
}
.headerDiv {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #000;
  padding: 5px 10px;
  padding-top: 2px;
}
.ul {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  margin-top: 5px;
  overflow-y: hidden;
  padding: 0.5px 0;
}

.li {
  border-radius: 1px;
  cursor: pointer;
  padding: 5px 5px;
  padding-left: 10px;
  margin: 0 2px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.x {
  height: 12px;
}
.x :hover {
  border-radius: 50%;
  background: #b4bccc;
}
.txt {
  padding: 0 10px;
  font-size: 12px;
}
#active {
  background: #409eff;
  color: #fff;
}

.el-main {
  padding: 10px 20px;
  /* transition: width 2s, height 2s; */
}
</style>